<!--
 * @Author: your name
 * @Date: 2021-04-01 17:40:36
 * @LastEditTime: 2021-04-02 14:59:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \svn-solax-cloud-system\src\views\csForm.vue
-->
<template>
    <div>
        <div class="csForm-mian-box">
            <baseForm :option='option' v-model="form" ref='child'>
                <template #nice='{data}'>
                    <el-input v-model="data.form[data.item.name]"></el-input>
                </template>
            </baseForm>
            <el-button type="primary" @click='save'>主要按钮</el-button>
        </div>
    </div>
</template>

<script>
import baseForm from '../components/common/baseForm'
export default {
    components: {
        baseForm
    },
    props: {

    },
    data() {
        return {
            nationList:[{
                id:'1',
                text:'1'
            },{
                id:'2',
                text:'2'
            }],
            form:{},
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            // option:{
            //     columnNum:'2',
            //     data:[{
            //         type:'input',
            //         name:'user',
            //         lable:'用户',
            //         rules:[{ required: true, message: '不能为空'}]
            //     },{
            //         type:'select',
            //         name:'type',
            //         lable:'类型',
            //         data:this.nationList,
            //         rules:[{ required: true, message: '不能为空'}]
            //     },{
            //         type:'checkbox',
            //         name:'checkout',
            //         lable:'是否',
            //         rules:[{ required: true, message: '不能为空'}]
            //     }],
            // }
        };
    },
    computed: {
        option(){
            return {
                columnNum:'1',
                data:[{
                    type:'input',
                    name:'user',
                    lable:'用户',
                    value:'123',
                    watch:this.cs,
                    rules:[{ required: true, message: '不能为空'}]
                },{
                    type:'slot',
                    slot:'nice',
                    lable:'slot插槽',
                    name:'slot',
                    rules:[{ required: true, message: '不能为空'}]
                }
                ,{
                    type:'select',
                    name:'type',
                    lable:'类型',
                    data:this.nationList,
                    value:'1',
                    rules:[{ required: true, message: '不能为空'}]
                },{
                    type:'checkbox',
                    name:'checkout',
                    lable:'是否',
                    value:true,
                    rules:[{ required: true, message: '不能为空'}]
                },{
                    type:'file',
                    name:'file',
                    lable:'上传文件',
                    value:'',
                    watch:this.fileChange,
                    rules:[{ required: true, message: '不能为空'}]
                },{
                    type:'item',
                    spa:true,
                    name:'date',
                    lable:'时间',
                    value:'',
                    watch:this.fileChange,
                    // pickerOptions:this.pickerOptions,
                    rules:[{ required: true, message: '不能为空'}]
                },{
                    type:'item',
                    spa:false,
                    name:'two',
                    lable:'时间',
                    value:'',
                    watch:this.fileChange,
                    pickerOptions:this.pickerOptions,
                    rules:[{ required: true, message: '不能为空'}]
                }],
            
            }
        }
    },
    watch: {
        form:{
            handler(nv,ov){
                if(nv){
                }
            },
            deep:true
        }   
    },
    created() {

    },
    mounted() {

    },
    methods: {
        fileChange(val){
            console.log(val,'fileChange');
        },
        cs(val){
            console.log(val,'cscsscscscs');
            console.log(this.nationList,'nationList');
        },
        save(){
            console.log(this.$refs.child.save(),'this.$refs.child.save()');
        }
    },
};
</script>

<style  lang="less" scoped>
.csForm-mian-box{
    width: 1000px;
    height: 500px;
    border: 1px solid #ccc;
    padding: 10px;
}
</style>
